.order-detail{
  background: var(--page-bg);
  .detail-main{
    position: relative;
    z-index: 1;
    padding: 22px;
    .main-refund{
      color: #26282A;
      font-size: 28px;
      line-height: 48px;
      text-align: center;
      margin-bottom: 24px;
    }
    .main-address{
      display: flex;
      align-items: center;
      color: #fff;
      padding: 16px 16px 36px;
      border-radius: 20px 20px 0 0;
      background-color: var(--theme-color);
      .address-title{
        max-width: 480px;
        margin-right: auto;
      }
      .h2{
        max-width: 480px;
        font-size: 30px;
      }
      image{
        width: 60px;
        height: 60px;
        margin-left: 48px;
        flex-shrink: 0;
      }
    }  // main-address end

    .main-box{
      border-radius: 16px;
      margin-top: -20px;
      background: #fff;
    }  // main-box end

    .main-header{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      padding: 32px 16px;
      margin-bottom: 24px;
      .header-info{
        color: #8E9094;
        font-size: 24px;
        margin-right: 20px;
        flex: 1;
        .h2{
          font-size: 36px;
          font-weight: 600;
          color: var(--title-color);
        }
        .info-p{
          color: var(--subT-color);
          margin: 16px 0 0;
        }
        .p{
          display: flex;
          margin: 16px 0;
          color: var(--subT-color);
          .p-left{
            margin-right: 10px;
          }
          .box-flex{
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            white-space: nowrap;
          }
          .image{
            min-width: 28px;
            width: 28px;
            height: 28px;
            margin-right: 6px;
          }
        }
      }

      .header-img{
        width: 144px;
        height: 192px;
        border-radius: 16px;
        display: block;
      }
    }  // main-header end
    
    .main-code{
      background: #fff;
      border-radius: 16px;
      margin: 22px 0;
      .code-title{
        font-size: 32px;
        font-weight: 600;
        color: var(--title-color);
        padding: 16px;
      }
    }
    .main-tabs{
      display: flex;
      padding: 0 16px;
      .tabs-item{
        padding: 28px 0;
        margin-right: 64px;
        font-size: 28px;
        color: #777A7F;
        position: relative;
        &.active{
          color: var(--title-color);
          font-size: 32px;
          font-weight: 600;
          &::after{
            display: block;
            content: '';
            width: 40px;
            height: 6px;
            background: var(--theme-color);
            position: absolute;
            bottom: 10px;
            border-radius: 6px;
            left: calc(50% - 20px);
          }
        }
      }
    }  // main-tabs end
    
    .detail-ticket{
      position: relative;
      border-radius: 32px;
      padding:24px;
      .ticket-list{
        height: 480px;
        position: relative;
        &::after{
          display: block;
          content: '';
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 9;
        }
      }
      .list-item{
        color: #96989A;
        font-size: 24px;
        text-align: center;
        .item-canvas{
          position: relative;
          .canvas-icon{
            width: 128px;
            height: 128px;
            opacity: 1!important;
            position: absolute;
            right: 140px;
            bottom:-30px;
          }
        }
        .item-img{
          width: 320px;
          height: 320px;
          margin: 0 auto;
        }
        .item-p{
          margin: 24px 0;
          line-height: 1;
        }
        .item-code{
          width: 400px;
          margin: 0 auto;
          border-radius: 16px;
          border: 1px solid #E6E8EA;
          line-height: 55px;
          .box-flex{
            justify-content: center;
          }
        }
      }
      .swiper-dots{
        display: flex;
        position: absolute;
        left: 24px;
        right: 24px;
        top: 49%;
        justify-content: space-between;
        z-index: 10;
        image{
          width: 76px;
          height: 76px;
        }
      }
      &.opacity{
        .item-img,.item,.item-code{
          opacity: .4;
        }
      }
    } // detail-ticket end

    .main-rebook{
      border-radius: 20px;
      padding: 24px 16px;
      background: #fff;
      margin: 24px 0;
      .rebook-title{
        font-size: 32px;
        font-weight: 600;
        color: var(--title-color);
      }
      .rebook-list{
        .list-item{
          margin-top: 24px;
          padding: 20px 16px;
          background: var(--page-bg);
          .item-title{
            display: flex;
            align-items: center;
            font-size: 28px;
            color: var(--title-color);
            font-weight: 600;
            margin-bottom: 20px;
            .h2{
              margin: 0 12px;
            }
            .at-icon{
              font-size: 24px;
            }
          }
          .item-info{
            font-size: 24px;
            color: #616469;
            display: flex;
            align-items: center;
            .info-p{
              width: 486px;
            }
            .info-button{
              padding: 0 24px;
              line-height: 48px;
              border-radius: 48px;
              color: var(--theme-color);
              border: 1px solid var(--theme-color);
              margin-left: auto;
            }
          }
        }
      }
    }  //  main-rebook end

    .detail-banner{
      display: flex;
      align-items: center;
      background: var(--theme-color);
      color: #fff;
      border-radius: 20px;
      margin: 22px 0;
      padding: 24px;
      .banner-info{
        font-size: 20px;
        .h2{
          font-size: 28px;
          font-weight: 500;
          margin-bottom: 14px;
        }
      }
      .at-icon{
        flex: 1;
        margin-left: 30px;
      }
    }  /// detail-banner end

    .goods-list{
      padding: 32px 24px;
      .list-item{
        display: flex;
        margin-bottom: 32px;
        &:last-child{
          margin-bottom: 0;
        }
        .item-img{
          width: 128px;
          height: 128px;
          display: block;
          margin-right: 24px;
          border-radius: 16px;
        }
        .item-info{
          flex: 1;
          .h2{
            font-size: 24px;
            color: var(--title-color);
          }
          .sub-h2{
            color: var(--subT-color);
            font-size: 20px;
            margin: 8px 0;
          }
        }
        .info-price{
          text-align: right;
          .price-left{
            font-size: 24px;
            color: var(--title-color);
          }
          .price-del{
            text-decoration: line-through;
          }
          .price-num{
            font-size: 24px;
            color: var(--subT-color);
            margin: 8px 0;
          }
        }
      }
    }  // goods-list end

    .detail-intro{
      padding: 32px 24px;
      background: #fff;
      border-radius: 20px;
      margin: 22px 0;
      .intro-title{
        display: flex;
        justify-content: space-between;
        font-size: 32px;
        font-weight: 600;
        color: var(--title-color);
        .title-span{
          font-size: 28px;
          color: #8E9094;
        }
      }
      .intro-list{
        .list-item{
          margin-top: 32px;
          display: flex;
          font-size: 28px;
          color: #616469;
          .item-label{
            margin-right: auto;
            color: var(--subT-color);
          }
          .item-copy{
            line-height: 1;
            padding: 8px;
            border-radius: 8px;
            background: var(--page-bg);
            color: #66686A;
            display: flex;
            align-items: center;
            margin-left: 8px;
            font-size: 22px;
            image{
              width: 24px;
              height: 24px;
              margin-right: 4px;
            }
          }
        }
      }
    }  /// detail-intro end

    .detail-notice{
      padding: 24px;
      background: #fff;
      border-radius: 16px;
      .notice-title{
        font-size: 32px;
        font-weight: 600;
        color: var(--title-color);
        margin: 16px 0;
      }
      .notice-p{
        font-size: 24px;
        color: var(--subT-color);
        line-height: 40px;
      }
    }

  }  //  detail-main end
}